<template>
    <div class="msj_sp">
        <!-- 查询 -->
        <div class="msj_sp_search">
            <p>查询药品</p>
            <el-date-picker
            size="small"
      v-model="value1"
      type="daterange"
      range-separator="至"
      start-placeholder="开始日期"
      end-placeholder="结束日期"
      >
    </el-date-picker>
    <div style="display: flex; padding-left: 30px;">
        <el-input v-model="input" size="small" onkeyup="value=value.replace(/[^\w\u4E00-\u9FA5]/g, '')" placeholder="请输入药品信息"></el-input>
        <el-button size="small" @click="onsearch">查询</el-button>
    </div>
        </div>

        <div style="padding:40px 0 20px;">
            <el-button type="primary" size="small" @click="toaddsp">添加商品</el-button>
        </div>

        <el-table
    :data="shops"
    border
    height="400"
    style="width: 100%">
    <el-table-column
      prop="huiname"
      label="商品"
     >
      <template slot-scope="scope">
        <div class="spinfo_msj">
            <div>
                <img :src="scope.row.spinfo.img" alt="">
            </div>
            <p>{{ scope.row.spinfo.name }}</p>
        </div>
      </template>
    </el-table-column>
    <el-table-column
      prop="sorts"
      label="排序"
      width="80">
    </el-table-column>
    <el-table-column
      width="240"
      label="价格">
      <template slot-scope="scope">
        <div >
            <span style="margin-right: 20px;">￥{{ scope.row.prices.newprice }}</span>
           <span style="text-decoration: line-through;">￥{{ scope.row.prices.oldprice }}</span>
        </div>
      </template>
    </el-table-column>
    <el-table-column
    prop="sshuhuichang"
    width="150"
      label="所属会场">
    </el-table-column>

    <el-table-column
    prop="kucuninfo"
    width="150"
      label="已付款/未付款/库存">
    </el-table-column>
    <el-table-column
      label="操作"
      width="200"
      >
      <template slot-scope="scope">
        <el-button @click="handleClick(scope.row,0)" type="text" size="small">修改</el-button>
        <el-button @click="handleClick(scope.row,1)" type="text" size="small">删除</el-button>
      </template>
    </el-table-column>
  </el-table>
  <!-- 分页 -->
  <div v-show="isshow" style="width: 100%; display: flex; margin: 10px 0; justify-content: flex-end;">
    <el-pagination
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :current-page="currentPage4"
      :page-sizes="[5,10,15,100]"
      :page-size="pagesize"
      layout="total, sizes, prev, pager, next, jumper"
      :total="nums">
    </el-pagination>
  </div>
    </div>
</template>

<script>
import {getmsjhuichangshops,delmsjhuichangshops} from '../../../utils/api'
export default {
    name: 'PhaemacySecondssp',

    data() {
        return {
            value1:'',
            input:'',
            shops:[],
            tableData:[],
            nums:0,
            pagesize:5,
            currentPage4: 1,
            isshow:true
        };
    },
    created() {
        this.gethuishops()
    },
    mounted() {
        
    },

    methods: {
        // 分页
        fenye(v){
        let arr=JSON.parse(JSON.stringify(v))
        let start=(this.currentPage4-1)*this.pagesize
        this.shops=arr.splice(start,this.pagesize)
        if(this.shops.length==0){
          this.currentPage4=(this.currentPage4-1)>1?(this.currentPage4-1):1
          this.gethuishops()
        }
      },
    //   请求所有商品管理数据 
    gethuishops(){
        getmsjhuichangshops().then(res=>{
            let data=res.data.data.map(v=>{
                v.spinfo=JSON.parse(v.spinfo)
                v.prices=JSON.parse(v.prices)
                return v
            })
            data.sort((a,b)=>a.sorts-b.sorts)
            this.tableData=data
            this.nums=data.length
            this.fenye(data)
        })
    },
      handleSizeChange(val) {
        this.pagesize=val
        this.fenye(this.tableData)
      },
      handleCurrentChange(val) {
        this.currentPage4=val
        this.fenye(this.tableData)
      },
    //   删除 
    handleClick(v,n){
        if(n==1){
            delmsjhuichangshops(v.id).then(res=>{
                this.$message({
                    message: res.data.msg,
                    type: 'success'
                })
                this.gethuishops()
                this.$bus.$emit('getshop',{curr:1})
            })
        }else{
            let obj={
                data:v,
                isadd:0
            }
            this.$router.push({
            name:'addhuicshops',
            params:obj
        })
        sessionStorage.setItem('addmsjhuicshops',JSON.stringify(obj))
        }
    },
    // 查询搜索 
    onsearch(){
        let arr=[]
        if((this.value1==''||this.value1==null)&&this.input==''){
            this.gethuishops()
            this.isshow=true
        }else{
            this.value1=(this.value1!=''&&this.value1!=null)?(this.value1.map(v=>{
                v=Number(new Date(v))
                return v
            })):this.value1
            if(this.input!=''&&(this.value1!=''&&this.value1!=null)){
                arr=this.tableData.filter(v=>{
                    let t=Number(new Date(`${v.times.split(' ')[0]} 00:00:00`))
                    return (v.spinfo.name.includes(this.input)||v.sshuhuichang.includes(this.input))&&t>=this.value1[0]&&t<=this.value1[1]
                })
            }else{
                arr=this.tableData.filter(v=>{
                    let t=Number(new Date(`${v.times.split(' ')[0]} 00:00:00`))
                    return this.input!=''?(v.spinfo.name.includes(this.input)||v.sshuhuichang.includes(this.input)):t>=this.value1[0]&&t<=this.value1[1]
                })
            }
            this.shops=arr
            this.isshow=false
        }
    },
    // 跳转添加商品 
    toaddsp(){
        let obj={
            isadd:1
        }
        this.$router.push({
            name:'addhuicshops',
            params:obj
        })
        sessionStorage.setItem('addmsjhuicshops',JSON.stringify(obj))
    }
    },
};
</script>

<style lang="less" scoped>
*{
    margin: 0;
}
.msj_sp_search,.msj_sp{
    width: 100%;
}
.msj_sp_search{
    display: flex; align-items: center;
}
.msj_sp_search p{
    width: 150px; font-size: 14px;
}
.spinfo_msj{
    display: flex;
    box-sizing: border-box;
    padding-left: 10px; align-items: center;
}
.spinfo_msj img{
    width: 60px;
}
.spinfo_msj p{
    font-size: 14px;
    width: 220px;
    text-align: center;
}
</style>